<template>
  <div class="wrapper">
    <Header :title="title" :back="back"></Header>
    <!--<div class="title">-->
    <!--<router-link to ="/Words">返回</router-link>-->
    <!--</div>-->

    <p class="title">单词拼写</p>
    <div class="section">
      <ul class="list" v-for="(item,index) in wordAttr">
        <li v-for=" (word,index) in item">
          <span>{{word.description}}</span>
          <input type="text" placeholder="请输入英文意思" class="text1" />
          <span class="words" v-show="answer">{{word.word}}</span>
        </li>
      </ul>
    </div>
    <button v-on:click="addWord(newWord)" class="button1">校验</button>
  </div>
</template>

<script>
import Header from "../header/header";
export default {
  name: "AddWord",
  components: {
    Header
  },
  data() {
    return {
      newWord: {
        word: "",
        description: ""
      },
      title: "单词记忆",
      back: "/Words",
      words: [],
      count: 0,
      page: 1,
      num: null,
      dom: "",
      wordAttr: [],
      answer:false
    };
  },
  methods: {
    addWord: function() {
     this.answer=true
    },
    show: function(page) {
      // console.log(page);
      let _this = this;
      this.$http
        .jsonp(
          "http://app.sencha.com.cn/soya/apps/testdb/server/?action=wordList.list&perPage=10&page=" +
            page,
          {
            //请求参数
          }
        )
        .then(
          function(res) {
            console.log(res.data);
            _this.words = res.data.data;
            _this.count = res.data.count;
            _this.wordtype = res.data.wordtype;
            _this.wordAttr.push(_this.words);
          },
          function(error) {
            //console.log(1)
            console.log(error);
          }
        );
    }
  },
  created() {
    this.show(1);
  }
};
</script>


<style scoped>
.wrapper {
  margin-top: 55px;
  text-align: left;
}
.title {
  padding-left: 23px;
  margin-bottom: 10px;
  color: #999;
}
.section {
  background: #ffffff;
  padding: 0 23px;
}
.section li {
  height: 55px;
  line-height: 55px;
  border-bottom: 1px #eee solid;
  font-size: 16px;
}
.section input {
  border: none;
  margin-left: 16px;
  font-size: 14px;
}
.button1 {
  border: 0;
  background: #0bcdf0;
  border-radius: 3px;
  height: 42px;
  width: calc(100% - 66px);
  margin: 80% 33px 10% 33px;
  font-size: 16px;
  font-weight: bold;

  color: #ffffff;
}
.words{
    color:red;
}
</style>
